import { ExpertRecommend } from '@/api/expert';
import { OrderProps } from '@/api/order';
import { Button, Icon, Popup } from '@antmjs/vantui';
import { Text, Textarea, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState } from 'react';
import { useRequest } from 'taro-hooks';

export default function useEvaluate(props: {
  detail: OrderProps;
  onSuccess: Function;
}) {
  const [show, setShow] = useState<boolean>(false);
  const [message, setMessage] = useState<string>();

  const { runAsync, loading } = useRequest(ExpertRecommend, { manual: true });

  function renderNode() {
    return (
      <Popup
        show={show}
        round
        style={{
          overflow: 'initial',
        }}
      >
        <Icon
          name='close'
          className=' absolute right-0 -top-[90px] text-3xl text-white'
          onClick={() => setShow(false)}
        />
        <View className='w-[600px] px-4 pb-4'>
          <Text className=' text-[36px] font-bold text-black text-center block py-5'>
            评价
          </Text>
          <Text className=' block text-xs text-gary4 mb-2'>请输入您的建议</Text>
          <Textarea
            onInput={(e) => {
              setMessage(e.detail.value);
            }}
            className=' bg-[#F6F7FB] h-[200px] w-full rounded-lg p-4'
            placeholder='请输入'
          />
          <Button
            loading={loading}
            block
            type='primary'
            className=' mt-4'
            onClick={async () => {
              if (!message)
                return Taro.showToast({ title: '请输入评价', icon: 'none' });
              await runAsync({ id: props.detail.id, msg: message });
              setShow(false);
              setMessage(undefined);
              props.onSuccess();
            }}
          >
            提交
          </Button>
        </View>
      </Popup>
    );
  }

  return {
    renderNode,
    open: () => setShow(true),
  };
}
